<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="icon" href="${pageContext.request.contextPath}/static/img/favicon.ico"  type="image/x-icon" />
    <script src="/static/js/echarts.js"></script>
    <script src="/static/js/china.js"></script>
    <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
    <style>
        *{margin:0;padding:0}
        html,body{
            width:100%;
            height:100%;
        }
        #main{
            width:600px;
            height:400px;
            margin: 150px auto;
            border:1px solid #ddd;
        }
        /*默认长宽比0.75*/
    </style>
</head>
<body>
<div id="main">
</div>

<script type="text/javascript">
      //定时调用
    // setInterval(function () {
     //    $.ajax({
     //        url: '/hello/chinesemap/2',
     //        type: 'post',
     //        async: true,
     //        dataType: 'json',
     //        success: function (result) {alert("1")}
     // },5000)})




    $(document).ready(function () {
        var myChart = echarts.init(document.getElementById('main'));

        var dataList=[
            {name:"南海诸岛",value:0},
            {name: '北京', value: randomValueh()},
            {name: '天津', value: randomValue()},
            {name: '上海', value: randomValues()},
            {name: '重庆', value: randomValues()},
            {name: '河北', value: randomValue()},
            {name: '河南', value: randomValue()},
            {name: '云南', value: randomValue()},
            {name: '辽宁', value: randomValues()},
            {name: '黑龙江', value: randomValue()},
            {name: '湖南', value: randomValues()},
            {name: '安徽', value: randomValue()},
            {name: '山东', value: randomValueh()},
            {name: '新疆', value: randomValue()},
            {name: '江苏', value: randomValues()},
            {name: '浙江', value: randomValues()},
            {name: '江西', value: randomValues()},
            {name: '湖北', value: 33610},
            {name: '广西', value: randomValue()},
            {name: '甘肃', value: randomValues()},
            {name: '山西', value: randomValue()},
            {name: '内蒙古', value: randomValue()},
            {name: '陕西', value: randomValue()},
            {name: '吉林', value: randomValue()},
            {name: '福建', value: 0},
            {name: '贵州', value: randomValues()},
            {name: '广东', value: randomValueh()},
            {name: '青海', value: 0},
            {name: '西藏', value: 0},
            {name: '四川', value: randomValues()},
            {name: '宁夏', value: randomValue()},
            {name: '海南', value: randomValue()},
            {name: '台湾', value: randomValues()},
            {name: '香港', value: randomValue()},
            {name: '澳门', value: randomValue()}
        ]


        setTimeout(function () {
        $.ajax({
            url: '/hello/chinesemap/2',
            type: 'post',
            async: true,
            dataType: 'json',
            success: function (result) {
                myChart.setOption({
                    tooltip: {
                        formatter: function (params, ticket, callback) {
                            return params.seriesName + '<br />' + params.name + '：' + params.value
                        }//数据格式化
                    },
                    visualMap: {
                        min: 0,
                        max: 1200,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],//取值范围的文字
                        inRange: {
                            color: ['#e0ffff', '#DC143C']//取值范围的颜色
                        },
                        show: true//图注
                    },
                    geo: {
                        map: 'china',
                        roam: false,//不开启缩放和平移
                        zoom: 1.23,//视角缩放比例
                        label: {
                            normal: {
                                show: true,
                                fontSize: '10',
                                color: 'rgba(0,0,0,0.7)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis: {
                                areaColor: '#F3B329',//鼠标选择区域颜色
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    series: [
                        {
                            name: '信息量',
                            type: 'map',
                            geoIndex: 0,
                            data: dataList
                        }
                    ]
                });
            }
        },50000)})


            function randomValue() {
                return Math.round(Math.random()*100)+50;
            }
            function randomValues() {
                return Math.round(Math.random()*100)+300;
            }
            function randomValueh() {
                return Math.round(Math.random()*500)+500;
            }
            function randomValuek() {
                return Math.round(Math.random()*1000)+4000;
            }

        myChart.on('click', function (params) {
            alert(params.name);
        });

    })
    // setTimeout(function () {
    //      myChart.setOption({
    //          series : [
    //              {
    //                  name: '信息量',
    //                  type: 'map',
    //                  geoIndex: 0,
    //                  data: dataList
    //              }
    //          ]
    //      });
    //  },5000)
</script>
</body>
</html>